<template>
  <div class="attention" v-if="isShow">
    <button @click="attentionUser" :disabled="isAttention" :class="{active: isAttention}">{{isAttention ? '已关注' : '关注'}}</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  name: 'Attention',

  data() {
    return {
    
    };
  },

  props: {
    // 是否关注
    isAttention:Boolean,
    // 被关注用户信息
    username: {
      type: String,
      default: ''
    }
  },

  computed: {
    // 判断关注按钮是否显示
    isShow(){
      return this.username != (this.$store.state.userinfo ? this.$store.state.userinfo.username : '')
    }
  },

  mounted() {
    
  },

  methods: {
    attentionUser(){
      if(this.$store.state.isLogin){
        this.$api.attentionUser({
          username: this.username
        }).then(res => {
          if(res == 1){
            this.$emit('isAttention')
          }else{
            alert(res)
          }
        })
      }else{
        this.showHint({title:'请先登陆',isFlag:false})
      }
    },
    ...mapActions(['showHint'])
  },
};
</script>

<style scoped>
.attention button{
  background-color: orange;
  color: white;
  font-size: 8px;
  padding: 3px 0;
  opacity: .9;
  cursor: pointer;
  transform: scale(0.8);
  transition: all .3s ease;
  border-radius: 4px;
  letter-spacing: 1em;
  padding-left: 10px;
  width: 100%;
}
.attention button:hover{
  opacity: 1;
}
.attention .active{
  background-color: gray;
}
</style>